<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
<!--    设置网页图标-->
    <link rel="icon" href="img/favicon.ico">
<!--    字体图标-->
    <link rel="stylesheet" href="icon/iconfont.css">
<!--    重置网页默认效果的CSS文件-->
    <link rel="stylesheet" href="CSS/reset.css">
<!--    顶部黑色导航区域和白色导航区域的CSS文件-->
    <link rel="stylesheet" href="CSS/topbar_nav.css">
</head>
<body>
<!--顶部黑色导航区域-->
<div class="black-nav">
    <div class="wrap">
    <!--左边的列表菜单-->
        <ul class="nav-left">
            <li><a href="">小米官网</a><span>|</span></li>
            <li><a href="">小米商城</a><span>|</span></li>
            <li><a href="">小米澎湃OS</a><span>|</span></li>
            <li><a href="">小米汽车</a><span>|</span></li>
            <li><a href="">云服务</a><span>|</span></li>
            <li><a href="">IoT</a><span>|</span></li>
            <li><a href="">有品</a><span>|</span></li>
            <li><a href="">小爱开放平台</a><span>|</span></li>
            <li><a href="">资质证照</a><span>|</span></li>
            <li><a href="">协议规划</a><span>|</span></li>
            <li><a href="">下载app</a><span>|</span>
<!--                小米二维码图片-->
            <div class="appcode">
                <img src="images/download.png" alt="">
                <p>小米商城APP</p>
            </div>
<!--                小三角-->
                <div class="stri"></div>
            </li>
            <li><a href="">Select Location</a></li>
        </ul>
       <!--右边的菜单列表-->
        <ul class="nav-right">
            <li><a href="">登录</a><span>|</span></li>
            <li><a href="">注册</a><span>|</span></li>
            <li><a href="">消息通知</a></li>
            <li class="cart">
                <a href="">
                   <i class="iconfont icon-gouwuchekong"></i>
                    购物车(0)
                </a>
                <div class="cart-list">
                    购物车中还没有商品，赶紧选购吧！
                </div>
            </li>
        </ul>
    </div>
</div>
<!--黑色导航区域结束-->

<!--白色戴航区域-->
<div class="white-nav">
    <div class="wrap">
<!--        LOGO-->
        <div class="logo">
            <a href="">
                <img  class="logo-img" src="images/icon-小米归属.png" alt="">
            </a>
        </div>
<!--        菜单-->
        <div class="nav-bar">

        </div>
<!--        搜索-->
        <div class="search">

        </div>
    </div>
</div>
<!--白色导航区结束-->


</body>
</html>